<template>
  <div>
    <a href="https://vitejs.cn/" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo"/>
    </a>
    <a href="https://cn.vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo"/>
    </a>
  </div>
  <h1 v-text="msg"></h1>
  <h1 v-text="slogan"></h1>
  <HelloLhz></HelloLhz>
</template>
<script>
import HelloLhz from "./components/chap12/HelloLhz.vue";

let lhzMixins = {
  data() {
    return {
      msg: '111'
    }
  },
  created() {
    console.log('lhzMixins');
  },
};
let lslMixins = {
  data() {
    return {
      msg: '222'
    }
  },
  created() {
    console.log('lslMixins');
  }
};
export default {
  name: 'App',
  data() {
    return {
      msg: '333'
    }
  },
  created() {
    console.log('App');
  },
  mixins: [lhzMixins, lslMixins],
  components: {
    HelloLhz
  }

}
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
